<!--
 * @Description: 请输入描述信息
 * @Version: 请输入版本号
 * @Autor: xuebao
 * @Date: 2021-12-01 19:58:44
 * @LastEditors: xuebao
 * @LastEditTime: 2021-12-02 20:28:54
-->
<template>
  <div class="login">
      <h1>普通登陆组件</h1>
      <div class="account">
          <account-login :rule-form='ruleForm' :rules="rules" @submit="submit" @errorHandle="errorHandle"></account-login>
      </div>
      <h1>短信验证码登陆组件</h1>
      <div class="phone">
          <phone-login :rule-form='phoneForm' @send='send' 
          :countDown="30"
          @submit="submit" @errorHandle="errorHandle"></phone-login>
      </div>
  </div>
</template>

<script>
import AccountLogin from '../components/accountLogin/AccountLogin.vue'
import PhoneLogin from '../components/PhoneLogin/PhoneLogin.vue'
export default {
    components: { AccountLogin, PhoneLogin },
name:'Login',
data () {
  
    return {
        ruleForm:{
            username:'',
            password:'',
        },
        rules:{
            username:[
                {required:true,message:'用户名不能为空'},
                {min:2,max:6,message:'用户名在2-6个字符之间',trigger:'blur'}
                ],
            password:[
                {required:true,message:'密码不能为空'},
                {min:6,max:15,message:'密码在6-15个字符之间',trigger:'blur'}
                
                ],
        },
        phoneForm:{
            phone:'',
            code:'',
        }
    }
},
methods:{
    submit(){
        this.$message.success('提交成功')
    },
    errorHandle(){
       this.$message.error('表单填写有误,请检查')
    },
    send(){
        console.log(1);
        this.$message.info('发送验证码成功')
        // 掉接口
    }
}
}
</script>

<style scoped>
.login{
   margin: 30px 0 0 30px;
}
.account ,.phone{
    width: 500px;
}
</style>